/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
// 准备查询参数对象
const queryObj = {
  status: '',   //文章状态
  channel_id: '',  //频道id
  page: 1,  //当前页码
  per_page: 3  //每页条数
}
let totalCount = 0
// 获取文章列表数据
async function setArtileList() {
  const artileList = await axios({
    url: 'v1_0/mp/articles',
    params: queryObj
  })
  totalCount = artileList.data.total_count
  document.querySelector('.total-count').innerHTML = `共${totalCount}条`
  // 渲染
  document.querySelector('.art-list').innerHTML = artileList.data.results.map(item => {
    return `
      <tr>
        <td>
          <img src=${item.cover.type === 0? "https://img2.baidu.com/it/u=2640406343,1419332367&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500" : item.cover.images[0]} alt="">
        </td>
        <td>${item.title}</td>
        <td>
          ${item.status === 2 ? '<span class="badge text-bg-success">审核通过</span>':
            '<span class="badge text-bg-primary">待审核</span>'}
        </td>
        <td>
          <span>${item.pubdate}</span>
        </td>
        <td>
          <span>${item.read_count}</span>
        </td>
        <td>
          <span>${item.comment_count}</span>
        </td>
        <td>
          <span>${item.like_count}</span>
        </td>
        <td data-id=${item.id}>
          <i class="bi bi-pencil-square edit"></i>
          <i class="bi bi-trash3 del"></i>
        </td>
      </tr>
    `
  }).join('')
}
setArtileList()

/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */
// 获取频道列表
async function setChannelList() {
  // 发请求
  const result = await axios({ url: '/v1_0/channels'})
  const list = result.data.channels.map(item => {
    return `
    <option value="${item.id}">${item.name}</option>
    `
  }).join('')
  document.querySelector('.form-select').innerHTML = '<option value="" selected>请选择文章频道</option>' + list
}
setChannelList()

// 筛选状态标记数字 => change事件 => 绑定到查询参数对象上
// document.querySelectorAll('.form-check-input').forEach(item => {
//   item.addEventListener('change', e => {
//     queryObj.status = e.target.value
//   })
// })

document.querySelector('.sel-btn').addEventListener('click',() => {
  const from = document.querySelector('.sel-form')
  const fromData = serialize(from, {hash: true, empty: true})
  queryObj.channel_id = `${fromData.channel_id}`
  queryObj.status = fromData.status
  // console.log(fromData);
  setArtileList()
}) 

/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
document.querySelector('.next').addEventListener('click', () => {
  // 临界值判断
  if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) { //向上取整
    queryObj.page++
    document.querySelector(('.page-now')).innerHTML = `第${queryObj.page}页`
    setArtileList()
  }
})

document.querySelector('.last').addEventListener('click', () => {
  // 临界值判断
  if (queryObj.page <= 1) return
  queryObj.page--
  document.querySelector(('.page-now')).innerHTML = `第${queryObj.page}页`
  setArtileList()
})

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
document.querySelector('.art-list').addEventListener('click',async e => {
  if (e.target.classList.contains('del')) {
    const del = await axios({
      url: `v1_0/mp/articles/${e.target.parentNode.dataset.id}`,
      method: 'DELETE',
    })

    // 解决最后一页 最后一条删除 需要向前翻页
    // 获取 tr
    const children = document.querySelector('.art-list').children
    // 只有一个 tr 标签并且当前页不等于1
    if (children.length === 1 && queryObj.page !== 1) {
      queryObj.page--
      document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
    }
    setArtileList()
    // alert('删除成功')
  } 
})

// 点击编辑时，获取文章 id，跳转到发布文章页面传递文章 id 过去
document.querySelector('.art-list').addEventListener('click',async e => {
  if (e.target.classList.contains('edit')) {
    // 一、跳转传参
    // 1. 跳转传参
    location.href = `../publish/index.html?id=${e.target.parentNode.dataset.id}`
    // 2.本地存储传参
    // localStorage.setItem('id', e.target.parentNode.dataset.id)
  } 
})

// 退出登录
document.querySelector('.quit').addEventListener('click',() => {
  localStorage.clear()
  location.href = '../login/index.html'
  alert('退出成功')
})
